  <!-- 最新音乐 -->
<template>
  <view class="newMusic">
    <view class="newMusic-list">
      <view
        @click="goPlayDet(item)"
        class="newMusicItem appFlex-one"
        v-for="(item, index) in newMusicList"
        :key="index"
      >
        <view class="itemLeft appFlex-two">
          <image :src="item.album.picUrl" mode="" />
          <view class="son">
            <view class="name">{{ item.name }}</view>
            <view class="songName">{{ item.artists[0].name }}</view>
          </view>
        </view>
        <text class="itemRight"> > </text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    newMusicList: {
      type: Array,
    },
  },
  methods: {
    //跳转播放详情
    goPlayDet(item) {
      let id = item.id;
      uni.navigateTo({
        url: "/pagesC/playDet/PlayDet?id=" + id,
      });
      uni.setNavigationBarTitle({
        title: item.name,
      });
    },
  },
};
</script>

<style lang="less">
.newMusic {
  .newMusic-top {
    margin-top: 30rpx;
    width: 750rpx;
    height: 80rpx;
    border-bottom: 2rpx solid #999;
    .left {
      font-weight: 600;
      font-size: 40rpx;
      margin-left: 20rpx;
    }
    .right {
      font-size: 30rpx;
      color: #666;
      margin-right: 20rpx;
    }
  }
  // 最新音乐列表
  .newMusic-list {
    padding: 0 20rpx;
    margin-top: 40rpx;
    width: calc(750rpx - 40rpx);
    .newMusicItem {
      width: 100%;
      height: 140rpx;
      .itemLeft {
        width: 600rpx;
        height: 140rpx;
        image {
          height: 120rpx;
          width: 130rpx;
          margin-right: 30rpx;
          border-radius: 20rpx;
        }
        .son {
          margin-top: 20rpx;
          .name {
            font-size: 36rpx;
          }
          .songName {
            font-size: 26rpx;
            color: #666;
          }
        }
      }
      .itemRight {
        font-size: 46rpx;
        color: #999;
        line-height: 140rpx;
      }
    }
  }
}
</style>